<template>
  <div class="wrapper">
    <el-row :gutter="30">
      <el-col v-for="item of panoramas" :key="item.id" :md="8" :sm="12" :xs="12" class="image_wrapper">
        <el-link type="primary" :href="item.overallURL" :underline="false" class="link">
          <el-image :src="imgUrl + '/' + item.image" class="image" />
        </el-link>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'PanoramaList',
  props: {
    panoramas: {
      type: Array,
      required: true
    }
  },
  data() {
    const IMAGE_FILE_NAME = 'overallImage'
    return {
      imgUrl: process.env.VUE_APP_BASE_IMAGE_API + IMAGE_FILE_NAME
    }
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  padding-top: 5px;
}

.image_wrapper {
  padding:10px;
  .link {
    display:flex;
    justify-content: center;
    align-items: center;
    .image {
      width:100%;
      height: 180px;
      border-radius:5px;
      box-shadow: 0 5px 5px 0 #999;
      display:block;
      margin:0 auto;
    }
  }
}

</style>
